<template>
    <div class="docker">
		<span v-for="(item, index) in dockerlist"
              :key="item.icon"
              :class="{ 'docker__item': true, 'docker__item--active':index === currentIndex}">

      <router-link :to="item.to">
        <div class="iconfont" v-html="item.icon"/>
        <div class="docker__title" v-html="item.text"/>
      </router-link>
		</span>
    </div>
</template>

<script>
export default {
    name: "docker",
    props: ["currentIndex"],
    setup() {
        const dockerlist = [
            {icon: '&#xe866;', text: '首页', to: {name: "Home"}},
            {icon: '&#xe641;', text: '购物车', to: {name: "CartList"}},
            {icon: '&#xe713;', text: '订单', to: {name: "Home"}},
            {icon: '&#xe600;', text: '我的', to: {name: "Home"}}
        ]
        return {dockerlist}
    }
}
</script>

<style lang="scss" scoped>
@import "../style/iconfont.css";
@import "../style/mixins";
@import '../style/viriables';

.docker {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.49rem;
    border-top: 1px solid $content-bgcolor;
    color: $content-fontcolor;

    &__item {
        flex: 1;
        text-align: center;
        width: 100%;

        a {
            text-decoration: none;
        }

        .iconfont {
            margin: 0.07rem 0 0.02rem 0;
        }

        &__title {
            font-size: 0.2rem;
            transform: scale(0.5, 0.5);
            transform-origin: center top;
        }

        &--active {
            a {
                color: #0091ff;
                text-decoration: none;
            }
        }
    }
}
</style>
